<template>
  <el-row>
    <el-col :span="24" class="bg">
        <div class="house">

        </div>
        <div>
          <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;
          <el-button @click="join" type="primary">连接</el-button>
          <el-button @click="exit" type="danger">断开</el-button>

          <br />
          <el-input type="textarea" v-model="message" :rows="9" />
          <el-button type="info" @click="send">发送消息</el-button>
          <br />
          <br />
          <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容
          <br />
          <br />
        </div>
    </el-col>
  </el-row>
  
</template>

<script setup name="anfangMonitor">
  const url=ref("ws://127.0.0.1:8080/WebSocketServer/2")
  const message=ref('')
  const text_content=ref('')
  let ws= null

  function join() {
    const wsuri = url.value;
    ws = new WebSocket(wsuri);
    ws.onopen = function (event) {
      debugger
      text_content.value = text_content.value + "已经打开连接!" + "\n";
    };
    ws.onmessage = function (event) {
      debugger
      text_content.value = event.data + "\n";
    };
    ws.onclose = function (event) {
      debugger
      text_content.value = text_content.value + "已经关闭连接!" + "\n";
    };
  }

  function exit() {
    if (ws) {
        ws.close();
        ws = null;
    }
  }

  function send() {
    if (ws) {
      ws.send(message.value);
    } else {
      alert("未连接到服务器");
    }
  }
</script>

<style scoped>
.bg{
    margin: 20px;
    background-color: #ACC1D2;
    min-height: calc(100vh - 125px);
}
.house{
  width: calc(1619px/2.2);
  height: calc(1246px/2.2);
  background-image: url("../../../assets/anfang/img/home2_meitu_2.jpg");
  background-size: cover;
}
</style>